<template>
	<scroll-view scroll-y="true"  :style="{color:mmiuy?'#ffffff':'#000000'}">
   <view class="back" :style="{background:mmiuy?'#000000':'#FAF9DE'}"></view>
    <view v-for="item in content" style="z-index: 99;">
        <p class="title">{{item.ConTitle}}</p>
        <p class="context" >{{item.ConText}}</p>
    </view>
    <view class="touch" @click="touchset('bottom')"></view>
    <view>
          <!-- 目录弹窗 -->
          <uni-popup ref="popup" background-color="#fff" >
            <scroll-view scroll-y="true" class="popup-content" :class="{ 'popup-height': type === 'left' }">
               <view class="cover">
                 <image :src="books[0].BookCover"></image>
                 <p class="bookname">{{books[0].BookName}}</p>
                 <p class="bookauthor">{{books[0].BookAuthor}}</p>
                 <p class="right">></p>
               </view>
               <view class="contitle" v-for="(item,i) in bookList">
                  <text  @click="toread(item.BookId,i)">{{item.ConTitle}}</text>
               </view>
            </scroll-view>
          </uni-popup>
    </view>
    <view>
          <!-- 设置弹窗 -->
          <uni-popup ref="set" background-color="#fff" >
            <view class="popup-set" >
                <view style="height: 6vh; padding: 20px;">
                  <p style="float: left;" @click="previou(id,page)">上一章</p>
                  <view class="progress-box">
                    <!-- "3.33/ 20 * 100" -->
                      <progress activeColor="gray" :percent="page/len*100" active stroke-width="3" class="progress" style="width: 60vw;"/>
                  </view>
                  <p style="float:right" @click="next(id,page)">下一章</p>
                </view>
                <view style="height: 14vh;">
                  <view class="BottomBtn" @click="toggle('left')">
                    <image src="../../static/content/content.png"></image>
                    <p>目录</p>
                  </view >
                  <view class="BottomBtn,distance" @click="switchColor()">
                    <image src="../../static/content/atnight.png"></image>
                    <p>夜间</p>
                  </view>
                  <view class="BottomBtn,distance" >
                    <image src="../../static/content/setup.png"></image>
                    <p>设置</p>
                  </view>
                </view>
            </view>
          </uni-popup>
    </view>
		<p>
			<view class="loading">{{loadingText}}</view>
		</p>
	</scroll-view>
</template>

<script>
  import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		data() {
			return {
        components: {cmdProgress},
        schedule:10,
        mmiuy:false,
        directoryShow:false,
				id:'',
				bookList:[],
				content:[],
				newsList:[],
        books:[],
				loadingText:'加载中...',
				page:0,
				title:'',
        i:0,
        len:0,
        schedule:0,
			}
		},
		onLoad(option) {
			this.id=option.bookid
      this.page=option.num>0?parseInt(option.num):0
			this.getIndexData()
      this.getCover()
    },
		created() {
		},
		onReachBottom(){
			// if(timer != null){
				// clearTimeout(timer);
			// }
			//加载更多数据
      console.log("hello")
				this.getmorenews();
		},
		methods: {
      getCover:function(){
      	uni.request({
      		url:'http://z7jxxt5.nat.ipyingshe.com/select/message',
      		method:'POST',
      		data:{
      			id:this.id
      		},
      		success:(res)=>{
      				this.books = res.data.message;
      		},

      	})
      },
			getIndexData:function(){
				uni.request({
					url:'http://z7jxxt5.nat.ipyingshe.com/select/content',
					method:'POST',
					data:{
						id:this.id,
					},
					success:(res)=>{
							this.bookList = res.data.content;
							this.content[this.i]=this.bookList[this.page];
              this.len = this.bookList.length;
					},
				})
			},
			getmorenews(){
				 //   if(this.loadingText != '' && this.loadingText != '加载更多'){
					// return false;
				 //   }
				   this.loadingText = '加载中...';
				   //在当前页面显示导航条加载动画。
				   uni.showNavigationBarLoading();
				   console.log("hello")
           this.i=this.i+1;
					 this.page = this.page+1;
           console.log(this.page)
					 this.content[this.i]=this.bookList[this.page];
           console.log(this.schedule)
					 console.log(this.content);
					 this.loadingText = '加载更多';
					 uni.hideNavigationBarLoading();
        },
      toggle(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.set.close()
      	this.$refs.popup.open(type)
      },
      touchset(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      	this.$refs.set.open(type)
      },
      dialogInputConfirm(val) {
      	setTimeout(() => {
      		uni.hideLoading()
      		console.log(val)
      		this.value = val
      		// 关闭窗口后，恢复默认内容
      		this.$refs.inputDialog.close()
      	}, 3000)
      },
      shareToggle() {
      	this.$refs.share.open()
      },
      click(){
      	uni.navigateTo({
      		url:"../read/read?bookid="+this.bookList[0].BookId
      	})
      },
      previou(id,i){
        console.log(i)
        i = parseInt(i)-1
        console.log(i)
          uni.redirectTo({
              url:'../read/read?bookid='+id+"&num="+i
          });
      },
      next(id,i){
        i = parseInt(i)+1
        console.log(i)
          uni.redirectTo({
              url:'../read/read?bookid='+id+"&num="+i
          });
      },
      toread(BookId,i){
        console.log(i)
        console.log(BookId)
        uni.redirectTo({
            url:'../read/read?bookid='+BookId+"&num="+i
        });
      },
      tocontent(){
      	uni.navigateTo({
      		url:"../content/content?bookid="+this.bookList[0].BookId
      	})
      },
      addBook(){
        uni.navigateTo({
        })
      },
      switchColor(){

        if(this.mmiuy){
          this.mmiuy=false
        }else{
          this.mmiuy=true
        }
      }
      },
	}
</script>

<style lang="scss">
	body{
		background-color: #FAF9DE;
	}
  .back{
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
  }
  .BottomBtn{
    float: left;
    margin-left: 10vw;
    font-size: 12px;
    image{
      width: 20px;
      height: 20px;
    }
  }
  .distance{
    margin-left: 31vw;
  }
  .touch{
    width: 30vw;
    height: 20vh;
    // background-color: rgba(0,0,0,0);
    position: fixed;
    left: 35vw;
    top: 40vh;
    // visibility: '';
    display: '';
    color:#000000;
  }
	.title{
		font-weight: bold;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
	}
	.context{
		padding: 20px;
		font-size: 15px;
		line-height: 20px;
	}
  .directoryShow{
    padding: 24rpx 0 0 24rpx;
    .tit{
      font-size: 38rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    .item{
      padding-right: 12rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1rpx solid #ebedf0;
    }
    .ac{
      color: #42b983;
    }
  }
  .cover{
    height: 8vh;
    background-color: rgba(0,0,0,0.1);
    padding: 20px;
    color:#000000;
    image{
      height: 9vh;
      width: 12vw;
      box-shadow: 1px 3px 5px #999999;
      float: left;
    }
    .bookauthor{
      margin-left: 18vw;
      font-size: 11px;
      color: #999999;
      height: 4vh;
      line-height: 4vh;
      margin-top: 5px;
    }
    .bookname{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp:1;
      margin-left: 18vw;
      line-height: 25px;
      height: 25px;
    }
    .right{
      color: #999999;
      text-align: right;
    }

  }
  @mixin flex {
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: row;
  	}

  	@mixin height {
  		/* #ifndef APP-NVUE */
  		/* #endif */
  		/* #ifdef APP-NVUE */
  		flex: 1;
  		/* #endif */
  	}

  	.box {
  		@include flex;
  	}

  	.button {
  		@include flex;
  		align-items: center;
  		justify-content: center;
  		flex: 1;
  		height: 35px;
  		margin: 0 5px;
  		border-radius: 5px;
  	}

  	.example-body {
  		background-color: #fff;
  		padding: 10px 0;
  	}

  	.button-text {
  		color: #fff;
  		font-size: 12px;
  	}

  	.popup-content {
      height: 100vh;
      width: 70vw;
  		background-color: #fff;
  	}
    .popup-set {
      height: 20vh;
      width: 100vw;
    	background-color: #fff;
      color:#000000;
      .progress-box{
        float: left;
        .progress{
          width: 50vw;
          margin-top: 1.5vh;
          margin-left: 2vw;
        }
      }
    }
    .contitle{
        font-size: 14px;
        line-height: 40px;
        margin-left: 10px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        color:#000000;
      }
  	.popup-height {
  		@include height;
  		width: 70vw;
  	}

  	.text {
  		font-size: 12px;
  		color: #333;
  	}

</style>
